CSS Full Course Day 3 [Hindi] 💻 | CSS Box Model 🚀 | Mohit Decodes

📦 CSS Tutorial – Day 3: CSS Box Model

Welcome to Day 3 of the CSS Full Course [Hindi] by Mohit Decodes! Today’s lesson covers the CSS Box Model, a fundamental concept to understand how elements are sized and spaced on a webpage.

🔹 What is the CSS Box Model?

Every HTML element is a rectangular box composed of four parts:

1. Content — The actual text or media inside the box
2. Padding — Space between the content and the border
3. Border — The edge around the padding
4. Margin — Space outside the border, separating the element from others

🔹 Visual Representation:

⚙️ CSS Properties Related to Box Model:

1. width & height — size of content box
2. padding — inner spacing
3. border — thickness and style of border
4. margin — outer spacing

📌 Example Code:

💡 Important Tips:

1. By default, width and height apply only to the content area.
2. Use box-sizing: border-box; to include padding and border within width/height.
3. Proper use of margin and padding controls spacing between elements.